<template>
    <div class="app-container">
        <div class="filter-container" style="display: flex;align-items: center;justify-content: space-between;">
            <el-button size="mini" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
                @click="handleCreate">
                新增子页面
            </el-button>
        </div>
        <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row
            style="width: 100%;">
            <el-table-column label="页面内容" min-width="150px">
                <template slot-scope="{row}">
                    <span>{{row.title}}</span>
                    <i v-if="row.isdefault" style="color:#13c661;" class="el-icon-s-home" />
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="created_time" width="150px" align="center" />
            <el-table-column label="更新时间" prop="updated_time" width="150px" align="center" />
            <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
                <template slot-scope="{row,$index}">
                    <el-button type="warning" size="mini" @click="openEdit(row)">
                        装饰
                    </el-button>
                    <el-button type="primary" size="mini" @click="handleUpdate(row)">
                        编辑
                    </el-button>
                    <el-popconfirm style="margin-left: 10px;" title="是否要删除该记录" @onConfirm="handleDelete(row,$index)">
                        <el-button :disabled="row.isdefault===1" slot="reference" size="mini" type="danger">
                            删除
                        </el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="90px"
                style="width: 400px; margin-left:50px;">
                <el-form-item label="页面标题" prop="title">
                    <el-input v-model="temp.title" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">
                    返回
                </el-button>
                <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
                    提交
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import waves from '@/directive/waves' // waves directive
    import Pagination from '@/components/Pagination' // secondary package based on el-pagination
    import {
        fetchMobileList,
        createMobile,
        updateMobile,
        deleteMobile
    } from '@/api/renovation'

    export default {
        components: {
            Pagination
        },
        directives: {
            waves
        },
        data() {
            return {
                dialogVisible: false,
                tableKey: 0,
                list: null,
                total: 0,
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 20,
                },
                temp: {
                    title: '',
                },
                dialogFormVisible: false,
                dialogStatus: '',
                textMap: {
                    update: '修改',
                    create: '创建'
                },
                rules: {
                    title: [{
                        required: true,
                        message: '页面标题不能为空',
                        trigger: 'blur'
                    }]
                }
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.listLoading = true
                fetchMobileList(this.listQuery).then(response => {
                    this.list = response.data.items
                    this.total = response.data.total
                    setTimeout(() => {
                        this.listLoading = false
                    }, 1.5 * 1000)
                })
            },
            resetTemp() {
                this.temp = {
                    title: ''
                }
            },
            handleCreate() {
                this.resetTemp()
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },
            createData() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.temp.created_time = new Date()
                        this.temp.updated_time = new Date()
                        createMobile(this.temp).then(() => {
                            this.list.unshift(this.temp)
                            this.dialogFormVisible = false
                            this.$notify({
                                title: 'Success',
                                message: 'Created Successfully',
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            },
            handleUpdate(row) {
                this.temp = row
                this.dialogStatus = 'update'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },
            updateData() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        const tempData = Object.assign({}, this.temp)
                        tempData.updated_time = new Date()
                        updateMobile(tempData).then(() => {
                            const index = this.list.findIndex(v => v.id === this.temp.id)
                            this.list.splice(index, 1, this.temp)
                            this.dialogFormVisible = false
                            this.$notify({
                                title: 'Success',
                                message: 'Update Successfully',
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            },
            handleDelete(row, index) {
                this.$notify({
                    title: '成功提示',
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })
                this.list.splice(index, 1)
            },
            openEdit(row){
                this.$router.push({
                    name:'MobileEdit',
                    query:{
                        id:row.id
                    }
                })
            }
        }
    }

</script>